<template>
	<div class="personnelAdd">
		<div class="header_ContentBox pl_10 pr_10">
			<i class="lhadmin lhadmin-renzheng Icon"></i>
			<span class="pl_10 pr_10">/</span>
			<span class="header_text">C端-人才 / 人才维护</span>
		</div>
		<div class="content_Box box-shadow mt_15 pl_10 pr_10">
			<div>
				<h4 class="border-bottom pb_10">人才信息</h4>
			</div>
			<div class="pt_10">
				<div class="row-info clear">
					<div class="fl title-key mt_15">身份证正反面</div>
					<div class="fl list-cont">
						<showimg :imgsrc="renAdd.idcard_positive_img"></showimg>
					</div>
					<div class="fl list-cont ml_20">
						<showimg :imgsrc="renAdd.idcard_back_img"></showimg>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">姓名</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.name" disabled></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">身份证号</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.identity" disabled></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">性别</div>
					<div class="fl list-cont">
						<el-select v-model="renAdd.sex" disabled>
							<el-option label="男" value="male"></el-option>
							<el-option label="女" value="female"></el-option>
							<el-option label="未识别" value="other"></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">民族</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.nationality"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">证件有效期</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.yxq" disabled></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">发证机关</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.fzjg" disabled></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">
						住址
					</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.address" disabled></el-input>
					</div>
					<i class="lhadmin lhadmin-dingwei dingwei ml_5" @click="redactBtn"></i>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">
						详细地址
					</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.detailed_address"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">
						<i class="lhadmin lhadmin-wujiaoxing"></i>
						代理商
					</div>
					<div class="fl list-cont">
						<el-select v-model="renAdd.agent_id" placeholder="代理商" filterable>
							<el-option v-for="item in agent_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</div>
				</div>

				<div class="row-info clear">
					<div class="fl title-key">人才评级</div>
					<div class="fl list-cont" style="margin-top: 7px;">
						<el-rate v-model="renAdd.pj" :colors="colors"></el-rate>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">手机号码</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.mobile"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">邮箱</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.mail"></el-input>
					</div>
				</div>
				<!-- <div class="row-info clear">
					<div class="fl title-key">银行卡号</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.card_number"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">开户行</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.opening_bank"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">分行/支行</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.bank_name"></el-input>
					</div>
				</div> -->
				<div class="row-info clear">
					<div class="fl title-key mt_15">手写签名</div>
					<div class="fl list-cont h_100">
						<img :src="renAdd.qm" class="avatar r-90" />
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key mt_15">健康证</div>
					<div class="fl list-cont">
						<showimg :imgsrc="renAdd.jkz"></showimg>
					</div>
					<div class="fl list-cont">
						<showimg :imgsrc="renAdd.jkz2"></showimg>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">发证城市</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.city_name" disabled></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">健康证号</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.health_sn" disabled></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<!-- <div class="fl title-key">发证/体检日期</div> -->
					<div class="fl title-key">证件有效期</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.expire_time" disabled></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">其他</div>
					<div class="fl list-cont">
						<!-- <uploadedit :pic_name="'qt'" :pic_url="renAdd.qt" @func="img1"></uploadedit> -->
						<el-upload
							class="upload-demo"
							action
							:before-upload="beforeAvatarUpload"
							:http-request="handleUpload"
							:on-preview="handlePreview"
							:on-remove="handleRemove"
							:file-list="fileList"
							list-type="picture"
						>
							<el-button size="small" type="primary">点击上传</el-button>
							<div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件格式</div>
						</el-upload>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">创建时间</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.cjsj" disabled></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">认证时间</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.rzsj" disabled></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">认证状态</div>
					<div class="fl list-cont">
						<el-select v-model="renAdd.renzheng_status" disabled>
							<el-option label="已认证" value="1"></el-option>
							<el-option label="未认证" value="2"></el-option>
						</el-select>

						<!-- <el-select v-model="renAdd.sex" disabled>
							<el-option label="男" value='male'></el-option>
							<el-option label="女" value='female'></el-option>
							<el-option label="未识别" value='other'></el-option>
                        </el-select>-->
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">签约时间</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.qysj" disabled></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">绑卡时间</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.bksj" disabled></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">人才类型</div>
					<div class="fl list-cont">
						<el-select v-model="renAdd.work_type" disabled>
							<el-option label="兼职" value="1"></el-option>
							<el-option label="全职" value="2"></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">结算周期</div>
					<div class="fl list-cont">
						<el-radio-group v-model="renAdd.bill_period" size="small">
							<el-radio label="day">日</el-radio>
							<el-radio label="week">周</el-radio>
							<el-radio label="month">月</el-radio>
						</el-radio-group>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">绑卡状态</div>
					<div class="fl list-cont">
						<el-select v-model="renAdd.bangka_status" disabled>
							<el-option label="已绑卡" value="1"></el-option>
							<el-option label="未绑卡" value="2"></el-option>
						</el-select>
					</div>
				</div>

				<div class="row-info clear">
					<div class="fl title-key">招聘方式</div>
					<div class="fl list-cont">
						<el-select v-model="renAdd.recruitment" disabled>
							<el-option v-for="item in sourceList" :key="item.id" :label="item.label" :value="item.id"></el-option>
						</el-select>
					</div>
					<div class="fl list-cont">（根据进入招聘方式的不同，招聘渠道、人才来源、邀请人等展示数据会有差异）</div>
				</div>

				<div class="row-info clear">
					<div class="fl title-key">招聘渠道</div>
					<div class="fl list-cont">
						<el-select v-model="renAdd.belong" :disabled="belongShow">
							<el-option
								v-for="item in channelList"
								:key="item.id"
								:label="item.label_name"
								:value="item.id"
							></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">招聘人</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.enroll_name" disabled></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">邀请人</div>
					<div class="fl list-cont">
						<el-input v-model="renAdd.recommender_name" disabled></el-input>
					</div>
				</div>

				<div class="row-info clear">
					<div class="fl title-key">备注</div>
					<div class="fl list-cont">
						<el-input type="textarea" v-model="renAdd.remark" :rows="4" :cols="32" placeholder="请输入内容"></el-input>
					</div>
				</div>
				<div class="clear"></div>
				<!-- <hr> -->
				<el-divider></el-divider>
				<!-- (未认证。未申请。签约失败)进入编辑审核签约不可见 -->
				<div
					class="row-info clear"
					v-if="renAdd.staff_status != '40' && renAdd.staff_status != '10' && renAdd.certification_status != '2'"
				>
					<div class="fl title-key">
						<!-- <i class="lhadmin lhadmin-wujiaoxing"></i>审核签约 -->
						审核签约
					</div>
					<div class="fl list-cont">
						<el-select v-model="renAdd.audit_qy" disabled>
							<el-option label="签约失败" value="40"></el-option>
							<el-option label="签约成功" value="30"></el-option>
							<el-option label="申请签约" value="20"></el-option>
							<el-option label="未申请" value="10"></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear" v-if="renAdd.audit_qy == 40">
					<div class="fl title-key">审核不通过原因</div>
					<div class="fl list-cont">
						<el-input type="textarea" disabled :rows="4" :cols="32" v-model="renAdd.fail_reason"></el-input>
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="ml_110 mt_80">
				<!-- <span class="resetBtn mr_10" @click="back">返回</span> -->
				<span class="btnOK" @click="submitBtn">保存</span>
			</div>
		</div>
		<!-- 弹出地图 -->
		<!-- 详细地址 -->
		<el-dialog
			title="详细地址"
			:visible.sync="readctRoleShow"
			width="1000px"
			:before-close="close"
			:close-on-click-modal="false"
		>
			<div class="auditCentent">
				<div class="clear">
					<div class="mb_10 roleFunctionBox">
						<div class="pl_10 pb_10">
							<!-- 区域画图 -->
							<!-- 2.0 -->
							<areapickings
								v-if="readctRoleShow"
								@pagedata="onChildValue"
								:inputs="renAdd.name"
								:lngs="lng"
								:lats="lat"
								:areas="renAdd.address"
							></areapickings>
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { put, getFileNameUUID } from '@/common/aliyun.oss.client'
import { markCover } from '../../../assets/js/data.js'
import { fetchLabelList } from '@/api/shop.js'
import { fetchAgentList } from '@/api/agent.js'
export default {
	name: 'PersonnelEdit',
	data() {
		return {
			head_url: 'https://img.zhongfuyun.com/',
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			//评分颜色设定
			colors: ['#cf2e22', '#cf2e22', '#cf2e22'],
			//上传相关
			dialogImageUrl: '',
			dialogVisible: false,
			disabled: false,
			//表单数据
			renAdd: {
				idcard_positive_img: '/static/img/idcard_positive_img.svg', //id正面
				idcard_back_img: '/static/img/idcard_back_img.svg', //id反面
				pj: 0,
				mobile: '',
				mail: '',
				bill_period: '',
				nationality: '',
				card_number: '',
				opening_bank: '',
				bank_name: '',
				fzjg: '', //发证机关
				address: '', //住址
				detailed_address: '', //详细地址
				qt: '',
				remark: '', //备注
				audit_qy: '',
				fail_reason: '',
				audit_no_text: '',
				qm: '', //签名
				jkz: '/static/img/img.svg', //健康证
				jkz2: '/static/img/img.svg', //健康证
				health_sn: '',
				expire_time: '',
				city_name: '',
				work_type: '',
				coordinates_list: {}, //新增的位置坐标
				recruitment: '', //招聘方式 ****
				belong: '', //招聘渠道 ****
				enroll_name: '', //招聘者 ****
				recommender_name: '', //邀请人 **
				agent_id: '' //代理商id
			},
			agent_list: [], //代理商列表
			belongShow: true, //招聘渠道禁用
			fileList: [],
			readctRoleShow: false, //区域框架的显示隐藏
			lng: '',
			lat: '',
			// 招聘方式列表
			sourceList: [
				{ label: '直聘', id: 1 },
				{ label: '供应商', id: 2 },
				{ label: '内推', id: 3 },
				{ label: '自然流量', id: 4 }
			],
			// 招聘渠道
			channelList: []
		}
	},

	mounted() {
		this.id = this.$route.query.id //接收传参
		this.startResult()
		this.alljob_type()
		this.getList()
	},
	methods: {
		//标签接口
		async alljob_type() {
			try {
				// 获取招聘渠道
				let res = await fetchLabelList({
					label_type: 'staff_belong'
				})
				console.log(res)
				this.channelList = res
			} catch (err) {
				console.log('error:', err)
			}
		},

		startResult() {
			// 请求人才详情接口
			let fn = new FormData()
			fn.append('id', this.$route.query.id) //姓名
			this.$http.post(this.url + '/user/getUserInfo', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						var redUserInfo = res.data.data
						console.log(redUserInfo)
						this.renAdd.recruitment = redUserInfo.recruitment //招聘方式 ****
						// 招聘渠道是否禁用
						if (+redUserInfo.recruitment === 1 && redUserInfo.belong == '') {
							this.belongShow = false
						} else {
							this.belongShow = true
						}
						this.renAdd.belong = redUserInfo.belong ? +redUserInfo.belong : '' //招聘渠道 ****
						this.renAdd.enroll_name = redUserInfo.supplier_name //招聘者 ****
						this.renAdd.recommender_name = redUserInfo.recommender_name //邀请人 **

						this.renAdd.name = redUserInfo.name
						this.renAdd.identity = redUserInfo.certification_info.identity_card
						this.renAdd.sex = redUserInfo.gender
						this.renAdd.nationality = redUserInfo.nationality
						this.renAdd.yxq = redUserInfo.certification_info.end_time.toString()
						this.renAdd.fzjg = redUserInfo.certification_info.authority
						this.renAdd.pj = parseInt(redUserInfo.level)
						this.renAdd.mobile = redUserInfo.mobile
						this.renAdd.mail = redUserInfo.email
						this.renAdd.bill_period = redUserInfo.bill_period
						// this.renAdd.card_number = redUserInfo.bank_info.bank_card_id
						// this.renAdd.opening_bank = redUserInfo.bank_info.bank_name
						// this.renAdd.bank_name = redUserInfo.bank_info.bank_branch_name
						// this.renAdd.cjsj = redUserInfo.sign_up_time;
						this.renAdd.cjsj = redUserInfo.sign_info.signed_time
						this.renAdd.rzsj = redUserInfo.certification_info.certification_time
						this.renAdd.qysj = redUserInfo.sign_info.signed_time
						this.renAdd.bksj = redUserInfo.sign_info.signed_time //??暂时如上一条
						this.renAdd.renzheng_status = redUserInfo.certification_status.toString()
						//上岗状态
						this.renAdd.work_status = redUserInfo.work_status.toString()
						this.renAdd.bangka_status = redUserInfo.bank_status.toString()
						this.renAdd.work_type = redUserInfo.work_type.toString()
						this.renAdd.remark = redUserInfo.remark
						this.renAdd.audit_qy = redUserInfo.staff_status.toString()
						this.renAdd.agent_id = +redUserInfo.agent_id

						if (redUserInfo.certificate_other.length != 0) {
							redUserInfo.certificate_other.forEach(item => {
								item.url = this.head_url + item.img
							})
							this.fileList = redUserInfo.certificate_other
						}
						if (redUserInfo.certificate_health.front_pic != '') {
							this.renAdd.jkz = this.head_url + redUserInfo.certificate_health.front_pic
						}

						if (redUserInfo.certificate_health.back_pic != '') {
							this.renAdd.jkz2 = this.head_url + redUserInfo.certificate_health.back_pic
						}

						this.renAdd.health_sn = redUserInfo.certificate_health.health_sn
						this.renAdd.expire_time = redUserInfo.certificate_health.expire_time
						this.renAdd.city_name = redUserInfo.certificate_health.city_name

						if (redUserInfo.certification_info.front_pic != '') {
							this.renAdd.idcard_positive_img =
								this.head_url + redUserInfo.certification_info.front_pic + markCover.markCoverImg
						}

						if (redUserInfo.certification_info.back_pic != '') {
							this.renAdd.idcard_back_img =
								this.head_url + redUserInfo.certification_info.back_pic + markCover.markCoverImg
						}

						if (redUserInfo.sign_info.sign_pic != '') {
							this.renAdd.qm = this.head_url + redUserInfo.sign_info.sign_pic
						} else {
							// this.renAdd.qm = "/static/img/img.svg";
						}

						if (redUserInfo.sign_info.fail_reason == 'undefined') {
							redUserInfo.sign_info.fail_reason = ''
						}

						this.renAdd.fail_reason = redUserInfo.sign_info.fail_reason
						this.renAdd.coordinates_list = redUserInfo.location //坐标位置
						//相关经纬度信息的返回
						// this.lat = redUserInfo.lat;
						// this.lng = redUserInfo.lng;
						if (redUserInfo.location.coordinates) {
							this.lat = redUserInfo.location.coordinates[1]
							this.lng = redUserInfo.location.coordinates[0]
						} else {
							this.lat = ''
							this.lng = ''
						}
						this.renAdd.address = redUserInfo.address
						this.renAdd.detailed_address = redUserInfo.detailed_address
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$alert('<strong>' + res.data.msg + '</strong>', '提示', {
							dangerouslyUseHTMLString: true
						})
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		submitBtn() {
			if (!this.renAdd.agent_id) return this.$message.error('请选择代理商')
			// 编辑接口
			let fn = new FormData()
			fn.append('id', this.id) //相关id
			fn.append('level', this.renAdd.pj)
			fn.append('email', this.renAdd.mail)
			fn.append('nationality', this.renAdd.nationality)
			fn.append('mobile', this.renAdd.mobile)
			// fn.append('bank_card_id', this.renAdd.card_number)
			// fn.append('bank_name', this.renAdd.opening_bank)
			// fn.append('bank_branch_name', this.renAdd.bank_name)
			fn.append('audit_name', this.manageInfo.username)
			fn.append('fail_reason', this.renAdd.fail_reason)
			fn.append('staff_status', this.renAdd.audit_qy)
			fn.append('work_type', this.renAdd.work_type)
			fn.append('belong', this.renAdd.belong) //招聘渠道
			fn.append('remark', this.renAdd.remark)
			fn.append('bill_period', this.renAdd.bill_period)
			//认证状态
			fn.append('certification_status', this.renAdd.renzheng_status)
			//上岗状态
			fn.append('work_status', this.renAdd.work_status)

			// this.fileList.forEach(item => {
			// 	item.url = item.img;
			// 	item.img = item.url;
			// });
			fn.append('certificate_other', JSON.stringify(this.fileList))

			//地理位置信息
			fn.append('address', this.renAdd.address)
			fn.append('detailed_address', this.renAdd.detailed_address)
			fn.append('lng', this.lng)
			fn.append('lat', this.lat)
			fn.append('agent_id', this.renAdd.agent_id)

			// fn.append('labels', '')
			this.$http.post(this.url + '/user/editUser', fn).then(
				res => {
					console.log(res)
					if (res.data.msg == '修改成功!' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						this.startResult()
						this.back()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		back() {
			//返回
			this.$router.go(-1)
		},
		img1(data) {
			this.renAdd.qt = data
		},
		handleRemove(file, fileList) {
			this.fileList = fileList
		},
		handlePreview(file) {
			console.log(file)
		},
		/**
		 * 自定义上传方法
		 */
		handleUpload(option) {
			// 生成的文件名称
			let objName = getFileNameUUID()
			// console.log(option);
			// console.log(objName);
			var that = this
			// 调用 ali-oss 中的方法
			put(`${objName}`, option.file).then(res => {
				// console.log(res); //返回的文件信息
				this.fileList.push({
					img: res.name,
					name: res.name,
					url: this.head_url + res.name
				})
			})
		},
		beforeAvatarUpload(file) {
			if (file.type != 'image/jpeg' && file.type != 'image/png' && file.type != 'image/gif') {
				this.$message.error('上传格式不正确 !')
				return false
			}

			const isLt2M = file.size / 1024 / 1024 < 5 //这里做文件大小限制
			if (!isLt2M) {
				this.$message.error('上传文件大小不能超过 5MB!')
				return false
			}
			return file.type
		},
		//子组件过来的值
		onChildValue(item) {
			this.lng = item[0]
			this.lat = item[1]
			this.renAdd.address = item[2]
			this.close()
		},
		redactBtn(row) {
			//编辑
			this.readctRoleShow = true //显示区域框
		},

		close() {
			this.readctRoleShow = false //隐藏区域框
		},
		async getList() {
			try {
				let ret = await fetchAgentList({ page: 1, limit: 1000 })
				console.log(ret)
				this.agent_list = ret.list.map(it => {
					return { name: it.name, id: +it.id }
				})
			} catch (err) {
				console.log('err:', err)
			}
		}
	},
	filters: {}
}
</script>

<style scoped>
.personnelAdd {
	margin: 15px 15px 0 15px;
}
.row-info {
	padding: 10px 0;
}
.resetBtn,
.btnOK {
	padding: 0 30px;
}
.title-key {
	width: 100px;
}
.list-cont img {
	width: 128px;
}

.r-90 {
	transform: rotate(-90deg);
}
.r180 {
	transform: rotate(180deg);
}
.r90 {
	transform: rotate(90deg);
}
.avatar {
	position: relative;
	top: -80px;
	left: 50px;
	width: 100px !important;
}
.dingwei {
	font-size: 26px;
	color: var(--btn);
}
</style>



// WEBPACK FOOTER //
// src/components/staff/PersonnelEdit.vue